import React from 'react';
import { Radio, message } from 'antd';
import { connect } from 'react-redux';
import Api from 'Utils/api';
import { generateUUID } from '../../../../../../../utils/index';
import CommonBorder from './../../../../../DispatchPage/Components/CommonBorder';

const CHARACTER_ARR = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
class SigQuestionDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {}
    };
    this.renderRadio = ::this.renderRadio;
    this.renderRadio = ::this.renderRadio;
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/choices/admin/subject/${this.state.id}`,
      success: (json) => {
        this.setState({ data: json });
      },
      error: (msg) => {
        message.error(msg, 3);
      },
    });
    api.run();
  }
  renderRadio(data) {
    const options = data.all_option;
    const answer = data.answer;
    const nodeInfo = [];
    for (let i = 0, len = options.length; i < len; i++) {
      let flag = true;
      for (let j = 0, answerlen = answer.length; j < answerlen; j++) {
        if (answer[j] === CHARACTER_ARR[i]) {
          flag = false;
          nodeInfo.push((
            <Radio key={generateUUID()} value={options[i]} checked disabled>{CHARACTER_ARR[i]}、{options[i]}</Radio>
          ));
        }
      }
      if (flag) {
        nodeInfo.push((
          <Radio key={generateUUID()} value={options[i]} disabled>{CHARACTER_ARR[i]}、{options[i]}</Radio>
        ));
      }
    }
    return nodeInfo;
  }
  render() {
    const { data } = this.state;
    return (
      <CommonBorder
        title="问题详情"
        content={
          <div className="question-detail-page">
            <div className="question-detail-content">
              <div className="question-item">
                <div className="title">
                  题面：{ data.question || ''}
                </div>
                <div className="choice">
                  {
                    data.all_option ? this.renderRadio(data) : ''
                  }
                </div>
              </div>
            </div>
          </div>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(SigQuestionDetail);
